<template>
	<view class="container">
		<!-- 加载中的骨架屏 -->
		<template v-if="loading">
			<view class="loan-amount-section">
				<view class="skeleton-header">
					<view class="skeleton-title"></view>
				</view>
				<view class="skeleton-input"></view>
				<view class="skeleton-limit"></view>
			</view>
			<view class="loan-term-section">
				<view class="skeleton-header">
					<view class="skeleton-title"></view>
				</view>
				<view class="term-options">
					<view class="skeleton-term" v-for="i in 6" :key="i"></view>
				</view>
			</view>
			<view class="loan-info skeleton">
				<view class="info-row" v-for="i in 4" :key="i">
					<view class="skeleton-label"></view>
					<view class="skeleton-value"></view>
				</view>
			</view>
			<view class="payment-method skeleton">
				<view class="skeleton-header">
					<view class="skeleton-title"></view>
					<view class="skeleton-subtitle"></view>
				</view>
				<view class="method-content">
					<view class="method-item">
						<view class="skeleton-icon"></view>
						<view class="skeleton-info">
							<view class="skeleton-name"></view>
							<view class="skeleton-desc"></view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<template v-else>
			<!-- 借款金额输入 -->
			<view class="loan-amount-section">
				<view class="amount-label">借款金额</view>
				<view class="amount-input">
					<text class="currency">¥</text>
					<input type="digit" v-model="loanAmount" placeholder="请输入借款金额" @input="handleAmountInput"
						@focus="handleAmountFocus" @blur="handleAmountBlur" />
					<!-- <text class="placeholder" :class="{ hide: isAmountFocused || loanAmount }">0.00</text> -->
				</view>
				<view class="amount-limit">可借额度 <text>¥{{ availableAmount }}</text></view>
			</view>

			<!-- 借款期限选择 -->
			<view class="loan-term-section">
				<view class="section-title">借款期限</view>
				<view class="term-options">
					<view v-for="term in termOptions" :key="term.value" class="term-item"
						:class="{ active: selectedTerm === term.value }" @click="selectedTerm = term.value">
						<view class="term-main">
							<text class="term-days">{{ term.days }}</text>
							<text class="term-label">期限</text>
						</view>
						<view class="term-sub">
							<text class="term-interest">{{ term.interest }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 借款信息确认 -->
			<view class="loan-info">
				<view class="info-header">
					<text class="title">借款信息确认</text>
					<text class="subtitle">请仔细核对以下信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<view class="info-label">
							<text class="icon">💰</text>
							<text>借款金额</text>
						</view>
						<view class="info-value">
							<text class="amount">¥{{ loanAmount || '0.00' }}</text>
							<text class="arrow">›</text>
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							<text class="icon">📅</text>
							<text>借款期限</text>
						</view>
						<view class="info-value">
							<text>{{ getSelectedTermLabel() }}</text>
							<text class="arrow">›</text>
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							<text class="icon">💸</text>
							<text>还款金额</text>
						</view>
						<view class="info-value">
							<text class="amount">¥{{ loanAmount || '0.00' }}</text>
							<text class="arrow">›</text>
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							<text class="icon">📆</text>
							<text>预计还款日期</text>
						</view>
						<view class="info-value">
							<text>{{ getRepaymentDate() }}</text>
							<text class="arrow">›</text>
						</view>
					</view>
				</view>
				<view class="info-tips">
					<text class="tip-icon">💡</text>
					<text class="tip-text">请确保您的账户在还款日期前有足够的余额</text>
				</view>
			</view>

			<!-- 到账提示 -->
			<view class="payment-method">
				<view class="method-header">
					<text class="title">到账方式</text>
					<text class="subtitle">审核通过后款项将通过以下方式到</text>
				</view>
				<view class="method-content">
					<view v-for="method in paymentMethods" :key="method.id" class="method-item"
						:class="{'active': method.selected}" @click="method.selected = true">
						<view class="method-icon" :class="{'skeleton-base': !alipayIconLoaded}">
							<image v-if="alipayIconLoaded" :src="request.baseURL + method.icon" mode="aspectFit"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="method-info">
							<text class="method-name">{{ method.name }}</text>
							<text class="method-desc">{{ method.desc }}</text>
						</view>
						<uni-icons type="checkmarkempty" size="20"
							:color="method.selected ? '#4A90E2' : '#ddd'"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 借款协议 -->
			<view class="agreement">
				<checkbox-group @change="handleAgreementChange">
					<checkbox value="agreed" :checked="isAgreed" color="#4A90E2" />
					<text class="agreement-text">我已阅读并同意<text class="link"
							@click="showAgreement = true">《借款协议》</text></text>
				</checkbox-group>
			</view>

			<!-- 借款协议弹窗 -->
			<loan-agreement :show="showAgreement" @close="showAgreement = false" @confirm="handleAgreementConfirm" />

			<!-- 确认借款按 -->
			<button class="submit-btn" :disabled="!canSubmit || isSubmitting"
				:class="{ disabled: !canSubmit || isSubmitting }" @click="handleSubmit">
				<text v-if="!isSubmitting">确认借款</text>
				<view v-else class="loading-text">
					<text>提交中</text>
					<view class="loading-dots">
						<text>.</text>
						<text>.</text>
						<text>.</text>
					</view>
				</view>
			</button>
		</template>



		<!-- 确认弹窗 -->
		<uni-popup ref="confirmPopup" type="center">
			<view class="confirm-dialog">
				<view class="dialog-header">
					<text class="dialog-title">温馨提示</text>
				</view>
				<view class="dialog-content">
					<text class="dialog-text">提交成功后,如果审核通过我们的工作人员会尽快与您电话联系确认借款信息。</text>
					<text class="dialog-text">请保持电话畅通。</text>
				</view>
				<view class="dialog-footer">
					<button class="dialog-btn cancel" @click="closeConfirmDialog">取消</button>
					<button class="dialog-btn confirm" @click="confirmSubmit">确认提交</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import LoanAgreement from '@/components/loan-agreement.vue'
	import request from "@/common/request.js"
	import {
		STORAGE_KEY,
		APP_INFO,
		updateStorageField,
		get_loan_default_amount
	} from '@/common/config.js'
	const user_info = JSON.parse(uni.getStorageSync(STORAGE_KEY.USER_INFO))
	const loading = ref(true)
	const maxAmount = ref(get_loan_default_amount())
	const availableAmount = ref(0)
	const loanAmount = ref('')
	const selectedTerm = ref(7)
	const isAgreed = ref(false)
	const showAgreement = ref(false)
	const isAmountFocused = ref(false)
	const isSubmitting = ref(false)
	let repayment_time = ref(); // 还款时间
	// 到账方式数据
	const paymentMethods = ref([{
		id: 1,
		name: '支付宝到账',
		icon: 'media/default/支付宝.png',
		desc: '预计30分钟内到账',
		loan_method: '0',
		selected: true
	}])



	// 支付宝图标加载状态
	const alipayIconLoaded = ref(false)

	// 确认提交
	const confirmSubmit = async () => {
		closeConfirmDialog()
		isSubmitting.value = true

		try {
			const loanRecord = {
				type: APP_INFO.NAME + "借款",
				amount: loanAmount.value,
				date: new Date().toLocaleString(),
				term: selectedTerm.value,
				status: 0,
				// 获取选中的支付方式
				loan_method: paymentMethods.value.find(m => m.selected)?.value || '0',
				// 还款时间
				repayment_time: repayment_time.value
			}
			uni.showLoading({
				title: "申请中",
				mask: true,
			})
			setTimeout(() => {
				uni.hideLoading()
				request.post("api/loan/create/", {
					user: user_info.id,
					...loanRecord
				}, {
					success: "提交成功 等待审核放款"
				}).then(res => {
					if (uni.getStorageSync(STORAGE_KEY.LOAN_RECORDS)) {
						let a = JSON.parse(uni.getStorageSync(STORAGE_KEY.LOAN_RECORDS));
						a.unshift(res.data)
						uni.setStorageSync(STORAGE_KEY.LOAN_RECORDS, JSON.stringify(a))


					} else {
						uni.setStorageSync(STORAGE_KEY.LOAN_RECORDS, JSON.stringify([res.data]))
					}

					updateStorageField(STORAGE_KEY.USER_INFO, "loan_default_amount", res.data
						.user_info.loan_default_amount
					)

					setTimeout(() => {
						uni.navigateBack()
					}, 900)
				}).catch(err => {
					console.log(err);
					if(err.data.code == 401) {
						setTimeout(() => {
							uni.navigateTo({
								url:"/pages/user/auth",
								animationType:"slide-in-right"
							})
						}, 800)
					} else {
						updateStorageField(STORAGE_KEY.USER_INFO, "loan_default_amount", err.data.data
							.amount)
					}

				})
			}, 1200)
		} catch (error) {
			uni.showToast({
				title: '提交失败，请重试',
				icon: 'none'
			})
		} finally {
			isSubmitting.value = false
		}
	}

	// 预加载支付宝图标
	const preloadAlipayIcon = () => {
		const img = new Image()
		// 使用选中支付方式的图标
		const selectedMethod = paymentMethods.value.find(m => m.selected)
		if (selectedMethod) {
			img.src = request.baseURL + selectedMethod.icon
			img.onload = handleIconLoad
			img.onerror = handleIconError
		}
	}

	const termOptions = [ {
			label: '7天',
			value: 7,
			days: '7天',
			interest: '0%'
		},
		{
			label: '14天',
			value: 14,
			days: '14天',
			interest: '0%'
		},
		{
			label: '30天',
			value: 30,
			days: '30天',
			interest: '0%'
		},
		{
			label: '90天',
			value: 90,
			days: '3个月',
			interest: '0%'
		},
		{
			label: '180天',
			value: 180,
			days: '6个月',
			interest: '0%'
		},
		{
			label: '360天',
			value: 360,
			days: '12个月',
			interest: '0%'
		}
	]

	// 添加弹窗引用
	const confirmPopup = ref(null)

	// 加载可用额度
	const loadAvailableAmount = () => {
		const records = uni.getStorageSync(STORAGE_KEY.LOAN_RECORDS) || '[]'
		const recordsArray = JSON.parse(records)
		const usedAmount = recordsArray
			.filter(record => record.type === '借款' && record.status === '待还款')
			.reduce((sum, record) => sum + Number(record.amount), 0)
		availableAmount.value = Math.max(maxAmount.value - usedAmount, 0)
	}

	// 计算是否可提交
	const canSubmit = computed(() => {
		get_loan_default_amount()
		const userInfo = uni.getStorageSync(STORAGE_KEY.USER_INFO)
		if (!userInfo) return false

		const userInfoData = JSON.parse(userInfo)
		const loanDefaultAmount = userInfoData.loan_default_amount || 0

		return loanAmount.value &&
			Number(loanAmount.value) <= availableAmount.value &&
			Number(loanAmount.value) <= loanDefaultAmount &&
			selectedTerm.value &&
			isAgreed.value
	})

	// 处理金额输入
	const handleAmountInput = (e) => {
		let value = e.detail.value
		// 限制只能输入数字和小数点
		value = value.replace(/[^\d.]/g, '')
		// 限只能有一个小数点
		value = value.replace(/\.{2,}/g, '.')
		// 限制能输入两位小数
		value = value.replace(/^(\-)*(\d )\.(\d\d).*$/, '$1$2.$3')

		// 获取用户额度限制
		const userInfo = uni.getStorageSync(STORAGE_KEY.USER_INFO)
		if (userInfo) {
			const userInfoData = JSON.parse(userInfo)
			const loanDefaultAmount = userInfoData.loan_default_amount || 0

			// 限制不能超过用户额度
			if (Number(value) > loanDefaultAmount) {
				value = loanDefaultAmount.toString()
				uni.showToast({
					title: `超出可借额度${loanDefaultAmount}元`,
					icon: 'none'
				})
			}
		}

		// 限制不超过可用额度
		if (Number(value) > availableAmount.value) {
			value = availableAmount.value.toString()
			uni.showToast({
				title: '超出可用额度',
				icon: 'none'
			})
		}

		loanAmount.value = value
	}

	// 获取选中期限的文本
	const getSelectedTermLabel = () => {
		const term = termOptions.find(t => t.value === selectedTerm.value)
		return term ? term.days : ''
	}

	// 计算还款日期
	const getRepaymentDate = () => {
		if (!selectedTerm.value) return ''
		const date = new Date()
		date.setDate(date.getDate() + selectedTerm.value)
		repayment_time.value =
			`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
		return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
	}

	// 处理协议勾选
	const handleAgreementChange = (e) => {
		isAgreed.value = e.detail.value.length > 0
	}

	// 处理协议确认
	const handleAgreementConfirm = () => {
		isAgreed.value = true
	}

	// 修改提交处理函数
	const handleSubmit = () => {
		if (!canSubmit.value || isSubmitting.value) return

		// 显示确认弹窗
		confirmPopup.value.open()
	}

	// 关闭确认弹窗
	const closeConfirmDialog = () => {
		confirmPopup.value.close()
	}

	// 图标加载成功
	const handleIconLoad = () => {
		alipayIconLoaded.value = true
	}

	// 图标加载失败
	const handleIconError = () => {
		alipayIconLoaded.value = false
	}

	// 获取额度
	const GetMyMoneyNumber = () => {
		let user_info = JSON.parse(uni.getStorageSync(STORAGE_KEY.USER_INFO)) || {
			loan_default_amount: 0
		}
		if (user_info) {
			maxAmount.value = user_info.loan_default_amount
			availableAmount.value = user_info.loan_default_amount
		}
		
		request.get("api/user/get_user_quota/").then(res => {
			updateStorageField(STORAGE_KEY.USER_INFO, "loan_default_amount", res.data.loan_default_amount)
		})
	}

	// 处理金额输入框获得焦点
	const handleAmountFocus = () => {
		isAmountFocused.value = true
	}

	// 处理金额输入框失去焦点
	const handleAmountBlur = () => {
		isAmountFocused.value = false
	}

	onMounted(() => {
		GetMyMoneyNumber()
		// 模拟加载延迟
		setTimeout(() => {
			loading.value = false
			preloadAlipayIcon()
		}, 1000)
	})
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.loan-amount-section {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 120rpx;
			background: linear-gradient(135deg, rgba(74, 144, 226, 0.05), transparent);
			pointer-events: none;
		}

		.amount-label {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 20rpx;
			position: relative;
			padding-left: 16rpx;
			display: flex;
			align-items: center;
			gap: 12rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4rpx;
				height: 24rpx;
				background: linear-gradient(to bottom, #4A90E2, #2196F3);
				border-radius: 2rpx;
			}

			&::after {
				content: '(元)';
				font-size: 24rpx;
				color: #999;
				font-weight: normal;
			}
		}

		.amount-input {
			display: flex;
			align-items: center;
			background: #f8f9fc;
			padding: 30rpx;
			border-radius: 16rpx;
			margin: 20rpx 0;
			position: relative;
			transition: all 0.3s ease;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 3rpx;
				background: linear-gradient(to right, #4A90E2, #2196F3);
				opacity: 0;
				transition: transform 0.3s ease;
				transform-origin: center;
			}

			&:focus-within {
				background: #fff;
				box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.1);

				&::before {
					opacity: 1;
				}

				.currency {
					color: #4A90E2;
				}
			}

			.currency {
				font-size: 60rpx;
				color: #333;
				font-weight: bold;
				font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
				margin-right: 20rpx;
				transition: color 0.3s ease;
			}

			input {
				flex: 1;
				font-size: 60rpx;
				font-weight: bold;
				color: #333;
				font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;

				&::placeholder {
					color: #ccc;
				}
			}

			.placeholder {
				position: absolute;
				left: 80rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 60rpx;
				color: #ccc;
				font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
				pointer-events: none;
				transition: opacity 0.3s ease;

				&.hide {
					opacity: 0;
				}
			}
		}

		.amount-limit {
			font-size: 24rpx;
			color: #999;
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 0 10rpx;

			&::before {
				content: '';
				width: 8rpx;
				height: 8rpx;
				background: linear-gradient(135deg, #4A90E2, #2196F3);
				border-radius: 50%;
				opacity: 0.8;
			}

			text {
				color: #4A90E2;
				font-weight: 500;
				font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
			}
		}
	}

	.loan-term-section {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

		.section-title {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 20rpx;
			position: relative;
			padding-left: 16rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4rpx;
				height: 24rpx;
				background: #4A90E2;
				border-radius: 2rpx;
			}
		}

		.term-options {
			display: flex;
			flex-direction: row;
			overflow-x: auto;
			gap: 20rpx;
			padding: 10rpx;
			scrollbar-width: none;
			&::-webkit-scrollbar {
				display: none;
			}
			
			.term-item {
				min-width: 200rpx;
				flex-shrink: 0;
				height: 100rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				background: linear-gradient(135deg, #f8f9fc, #f2f4f8);
				border-radius: 12rpx;
				border: 1rpx solid transparent;
				transition: all 0.3s ease;
				
				&.active {
					background: linear-gradient(135deg, #EDF4FF, #E3EFFF);
					border: 1rpx solid #4A90E2;
					transform: translateY(-2rpx);
					box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.15);
					
					.term-days {
						color: #4A90E2;
					}
					
					.term-interest {
						background: rgba(74, 144, 226, 0.2);
					}
				}
				
				.term-main {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 8rpx;
					
					.term-days {
						font-size: 32rpx;
						font-weight: 500;
						color: #666;
					}
					
					.term-label {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.term-sub {
					.term-interest {
						font-size: 24rpx;
						color: #4A90E2;
						padding: 4rpx 12rpx;
						background: rgba(74, 144, 226, 0.1);
						border-radius: 20rpx;
					}
				}
				
				&:active {
					transform: scale(0.98);
					opacity: 0.9;
				}
			}
		}
	}

	.loan-info {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

		.info-header {
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
			display: flex;
			flex-direction: column;
			gap: 8rpx;

			.title {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				position: relative;
				padding-left: 16rpx;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 4rpx;
					height: 24rpx;
					background: linear-gradient(to bottom, #4A90E2, #2196F3);
					border-radius: 2rpx;
				}
			}

			.subtitle {
				font-size: 24rpx;
				color: #999;
				padding-left: 16rpx;
			}
		}

		.info-list {
			padding: 10rpx 0;
		}

		.info-item {
			position: relative;
			padding: 24rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 1rpx;
				background: linear-gradient(to right, #f5f5f5, transparent);
			}

			&:last-child::after {
				display: none;
			}

			.info-label {
				display: flex;
				align-items: center;
				gap: 12rpx;

				.icon {
					font-size: 32rpx;
				}

				text {
					font-size: 28rpx;
					color: #666;
				}
			}

			.info-value {
				display: flex;
				align-items: center;
				gap: 8rpx;
				position: relative;

				text {
					font-size: 28rpx;
					color: #333;

					&.amount {
						font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
						font-weight: 500;
					}
				}

				.arrow {
					font-size: 24rpx;
					color: #999;
					margin-left: 8rpx;
				}
			}
		}

		.info-tips {
			margin-top: 20rpx;
			padding: 16rpx;
			background: rgba(74, 144, 226, 0.05);
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			gap: 8rpx;

			.tip-icon {
				font-size: 28rpx;
			}

			.tip-text {
				font-size: 24rpx;
				color: #666;
				flex: 1;
			}
		}
	}

	.agreement {
		padding: 30rpx 0;

		.agreement-text {
			font-size: 26rpx;
			color: #666;
			margin-left: 10rpx;

			.link {
				color: #4A90E2;
			}
		}
	}

	.submit-btn {
		background-color: #4A90E2;
		background: linear-gradient(135deg, #4A90E2, #2171C7);
		color: #fff;
		border-radius: 45rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
		box-shadow: 0 8rpx 16rpx rgba(74, 144, 226, 0.25);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&.disabled {
			background: #ccc;
			box-shadow: none;
		}

		&:active:not(.disabled) {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 8rpx rgba(74, 144, 226, 0.2);
		}

		&::before {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: linear-gradient(45deg,
					transparent,
					rgba(255, 255, 255, 0.1),
					transparent);
			transform: rotate(45deg);
			animation: btnShine 2s infinite;
		}

		.loading-text {
			display: flex;
			justify-content: center;
			align-items: center;

			.loading-dots {
				text {
					animation: loadingDots 1.4s infinite;
					margin-left: 4rpx;

					&:nth-child(2) {
						animation-delay: 0.2s;
					}

					&:nth-child(3) {
						animation-delay: 0.4s;
					}
				}
			}
		}
	}

	@keyframes loadingDots {

		0%,
		100% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}
	}

	@keyframes btnShine {
		0% {
			transform: rotate(45deg) translateX(-100%);
		}

		100% {
			transform: rotate(45deg) translateX(100%);
		}
	}

	// 骨架屏样式
	.skeleton {
		&-header {
			margin-bottom: 20rpx;
		}

		&-title {
			width: 120rpx;
			height: 32rpx;
			background: #f0f0f0;
			border-radius: 4rpx;
		}

		&-input {
			height: 100rpx;
			background: #f0f0f0;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
		}

		&-limit {
			width: 200rpx;
			height: 24rpx;
			background: #f0f0f0;
			border-radius: 4rpx;
		}

		&-term {
			min-width: 200rpx;
			flex-shrink: 0;
			height: 100rpx;
		}

		.info-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.skeleton-label {
				width: 120rpx;
				height: 28rpx;
				background: #f0f0f0;
				border-radius: 4rpx;
			}

			.skeleton-value {
				width: 160rpx;
				height: 28rpx;
				background: #f0f0f0;
				border-radius: 4rpx;
			}
		}
	}

	// 添加支付宝到账样式
	.payment-method {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

		.method-header {
			margin-bottom: 20rpx;

			.title {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 8rpx;
				display: block;
				position: relative;
				padding-left: 16rpx;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 4rpx;
					height: 24rpx;
					background: linear-gradient(to bottom, #4A90E2, #2196F3);
					border-radius: 2rpx;
				}
			}

			.subtitle {
				font-size: 24rpx;
				color: #999;
				padding-left: 16rpx;
			}
		}

		.method-content {
			.method-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				background: #f8f9fc;
				border-radius: 12rpx;

				.method-icon {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
					border-radius: 8rpx;
					overflow: hidden;
					position: relative;

					&.skeleton-base {
						@extend .skeleton-base;
					}

					image {
						position: absolute;
						top: 0;
						left: 0;
					}
				}

				.method-info {
					flex: 1;

					.method-name {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
						display: block;
					}

					.method-desc {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}

	// 添加确认弹窗样式
	.confirm-dialog {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.dialog-header {
			padding: 30rpx;
			text-align: center;
			border-bottom: 1rpx solid #eee;

			.dialog-title {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
			}
		}

		.dialog-content {
			padding: 40rpx 30rpx;

			.dialog-text {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				display: block;

				&:not(:last-child) {
					margin-bottom: 16rpx;
				}
			}
		}

		.dialog-footer {
			display: flex;
			border-top: 1rpx solid #eee;

			.dialog-btn {
				flex: 1;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 30rpx;
				border: none;
				background: none;

				&.cancel {
					color: #666;
					border-right: 1rpx solid #eee;
				}

				&.confirm {
					color: #4A90E2;
					font-weight: 500;
				}

				&:active {
					background: #f5f5f5;
				}
			}
		}
	}

	.method-item {
		&.active {
			background: #f0f7ff;
			border: 1rpx solid #4A90E2;
		}

		&:active {
			opacity: 0.8;
		}
	}
</style>